<template>
	<view class="store-city-component">
		<view
			class="select-store-city"
			@click="cityPopup = !cityPopup"
		>
			<text>{{ selectCity.city || '获取中' }}</text>
			<image class="icon-more" src="@/static/images/icon_gray_more.png"></image>
		</view>
		<view
			v-show="cityPopup"
			class="store-city-content"
		>
			<scroll-view
				scroll-y="true"
				class="store-city-scroll"
			>
				<view class="store-city-list">
					<view
						v-for="(item, index) in list"
						:key="index"
						class="store-city-item"
						@click="change(item)"
					>{{ item.city }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: Boolean,
		seleCityId: String,
		list: Array
	},
	computed: {
		cityPopup: {
			get () {
				return this.value
			},
			set (value) {
				this.$emit('input', value)
			}
		},
		selectCity () {
			return this.list.find(e => e.cityId === this.seleCityId) || this.list[0] || {}
		}
	},
	methods: {
		change (cityInfo) {
			if (cityInfo.city === this.selectCity.city) return
			this.cityPopup = false
			this.$emit('change', cityInfo)
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>